import React, { Component } from 'react';
import { Form, Input, Select } from 'antd';
import PropTypes from 'prop-types';
import './modal.css';
import {reqOrganListByParentOrgid1,reqRoleList} from '../../api';
import { connect } from 'react-redux';

const { Option } = Select;

class EditUserForm extends Component {
  state = {
    organList: [],
    roleArray:[],
  }

  static propTypes = {
    userName: PropTypes.string.isRequired,
    userEmail: PropTypes.string.isRequired, 
    userRoles: PropTypes.array.isRequired,
    userMobile: PropTypes.string.isRequired,
    organ: PropTypes.object.isRequired,
    setUser: PropTypes.func.isRequired
  }

  formRef = React.createRef();  // form对象

  getOrganList = async() => {  // 获取用户权限内的全部组织
    const org_pid = this.props.user.org.org_id;
    this.setState({ loading: true })
    const result = await reqOrganListByParentOrgid1(org_pid);
    this.setState({loading: false});
    const organList = result.data;  
    this.setState({
      organList
    })
  }

  getRoleList = () => {  // 获取全部角色
    let roleArray=[]
    this.props.userRoles.map((item) => {
      if(item.role_id=='605aaacc5d60f41c48d0afd7'){
        roleArray=this.props.userRoles;
      }else{
        reqRoleList().then(result=>{
          const roleInforList = result.data;
          roleArray = Object.keys(roleInforList).map(function(el){
            return roleInforList[el];
          })
        });
      }
    });
    console.log(roleArray,this.props.userRoles)
    this.setState({
     roleArray
    })
  }

  handleDefaultRoleList = () => {  // 生成角色多选框的默认显示数组
    const defaultValue = [];
    this.props.userRoles.map((item) => {
        defaultValue.push(item.role_id);
    });
    return defaultValue;
  };

  handleRoleList = () => {    // 获取全部角色，并 以标准格式 生成数组
    var children = [];
    console.log(this.state.roleArray)
    this.state.roleArray.map((item) => {
      children.push(<Option key={item.role_id}>{item.role_name_Zh}</Option>)   
    });
    
    return children;
  };

  componentDidMount() {
    this.props.setUser(this.formRef);  // 调用父组件传递的函数，目的是将 参数以实参的形式传递给父组件
    // this.getOrganList();
    this.getRoleList();
  };

  render() {
    const {userName,userEmail,userMobile,organ,userRemark} = this.props;   
    const layout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
    };
    return (
      <div>
        <Form 
          {...layout} 
          ref={this.formRef}   //可以通过ref获取数据域
          name="control-ref" 
          onFinish={this.onFinish}
          initialValues={{
            user_name: userName,
            user_email: userEmail,
            user_mobile: userMobile,
            org_id: organ.org_name,
            user_remark: userRemark,
            user_roles: this.handleDefaultRoleList()
          }}
        >    
          <Form.Item 
            name="user_name" 
            label="姓名" 
            rules={[{ required: true }]}
          >
            <Input placeholder="请输入用户姓名" />
          </Form.Item>

          <Form.Item 
            name= "user_email" 
            label="邮箱" 
            rules={[{ required: true,type: 'email' }]}>
            <Input placeholder="请输入电子邮箱" />
          </Form.Item>

          <Form.Item 
            name="user_roles" 
            label="角色"  
            rules={[{ required: true }]}
          >
            <Select mode="tags" style={{ width: '100%' }} placeholder="请选择角色" >
              {this.handleRoleList()}
            </Select>
          </Form.Item>

          <Form.Item
            name="user_mobile"
            label="手机号码"
            rules={[{ required: true, message: '请输入手机号码!' }]}
          >
            <Input placeholder="请输入手机号码" disabled/>
          </Form.Item>

          <Form.Item 
            name="org_id" 
            label="所属矿区" 
            rules={[{ required: true }]}
          >
            <Input placeholder="请选择所属组织" disabled/>
            {/* <Select
              placeholder="请选择所属组织"
              allowClear
            >
              {this.state.organList.map((item) => <Option value={item.org_id}>{item.org_name}</Option>)}
            </Select> */}
          </Form.Item>

          <Form.Item name="user_remark" label="备注">
            <Input.TextArea />
          </Form.Item>

        </Form>
      </div>
      
    )
  }
}

export default connect(
  state => ({user: state.user}),
  {}
)(EditUserForm);